<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 遍历数组  返回数组的每个元素(值) -->
        <h3>遍历数组</h3>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in list">
                {{item}} --- {{index}}
            </li>
        </ul>


        <!-- 遍历对象  返回对象的每个键值(值) -->
        <h3>遍历对象</h3>
        <div v-for="val in obj">
            {{val}}
        </div>
        <hr>
        <div v-for="(val,key) in obj">
            {{key}}----{{val}}
        </div>
        <hr>
        <div v-for="(val,key,index) in obj">
            {{index}} ---- {{key}}----{{val}}
        </div>

        <h3>遍历范围值</h3>
        <div v-for="n in 10">{{n}}</div>
        <div v-for="(n,i) in 10">{{i}}----{{n}}</div>
        <hr>
    </div>
</body>
<script>

    // v-for  列表渲染 -> 写在标签内,可以基于数组,对象,数值 渲染一个列表

    // 语法:
    // v-for='item in items'  或  v-for='(item,index) in items' 
    // v-for='item of items'  或  v-for='(item,index) of items' 
    // items => 数据(数组)
    // item  => 数组中的每个元素
    // index => 可选参数,表示元素对应的下标

    // 遍历对象
    // v-for='val in obj'  或 v-for='(val,key) in obj'  或 v-for='(val,key,index) in obj'
    // 还可以用第三个参数作为索引：

    // 遍历范围值 (值 => 正整数)
    // v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
    // v-for="n in 10"      或   v-for="(n,index) in 10"    


    // 需求:将数组中的每个元素放到对应的li标签内
    var vm = new Vue({
        el: "#app",
        data: {
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
            obj: {
                name: "张三",
                age: 18,
                height: "173cm",
                weight: "70kg",
                hobby: ["sing", "dance", "rap"]
            }
        },
        methods: {

        }

    })



</script>

</html>